<template>
  <div>
    <div class="popup-btn vh-c" @click="show = true">{{(page-1)*len+1}}-{{page*len}}章<van-icon name="arrow-down" /></div>
    <van-popup class="popup" v-model="show" position="top">
      <ul>
        <li v-for="index in count" :key="index" :class="{'more-list-active':(index==page)}">
          <a href="javascript:;" @click="changeSection(index)">{{(index-1)*len+1}}-{{index*len}}</a>
        </li>
      </ul>
    </van-popup>
    <section-list :articleId="articleId" :data="datalist"></section-list>
  </div>
</template>

<script>
import SectionList from '@/components/SectionList.vue'
export default {
  components:{
    SectionList
  },
  data(){
    return {
      show:false,
      datalist:this.$parent.datalist,
      len:this.$parent.datalist.length,
      articleId:this.$route.query.articleid,
      page:1
    }
  },
  computed:{
    count(){
      return Math.ceil(this.$parent.count/this.len)
    }
  },
  methods:{
    changeSection(index){
      if(index == this.page){
        return
      }
      this.page = index
      this.show = false
      this.$http.get(this.$route.meta.dataURL,{
        params:{
          page:this.page
        }
      })
      .then(res => {
        let {datalist} = res.data.data
        this.datalist = datalist
      })
      .catch(err => {
        throw ('NET ERROE!')
      })
      
    }
  }
}
</script>

<style>
.popup-btn{
  position: relative;
  z-index: 6666;
  padding: 0 15px;
  font-size: 13px;
  line-height: 36px;
  color: #aaa;
  background: #f8f8f8;
}
.popup{
  margin-top: 50PX;
  padding-top: 36px;
  max-height: 21vh;
  font-size: 14px;
  padding-bottom: 10px;
}
.popup ul{
  display: flex;
  flex-wrap: wrap;
  padding: 15px 15px 0;
  justify-content: space-between;
}
.popup li{
  width: 30%;
  text-align: center;
  border: 1px solid #ff976a;
  border-radius: 99px;
  margin-bottom: 13px;
}
.popup li>a{
  width: 100%;
  line-height: 30px;
  color: #ff976a;
  display: block;
}
.more-list-active{
  background: #ff976a;
}
.more-list-active>a{
  color: #fff !important;
}

</style>